<template>
  <div class="container">
    <div class="container-head flex_btw">
      <div class="head-title flex_x">
        <img class="head-icon" src="@/assets/images/data.png" alt="" />
        <span>数据配置-部门职务</span>
      </div>
      <div class="flex_x">
        <el-input
          class="mr20"
          v-model="params"
          style="width: 240px"
          placeholder="请输入编号或名称"
        >
        </el-input>
        <el-button type="primary">搜索</el-button>
        <el-button type="primary">模板下载</el-button>
        <el-button type="primary">导入</el-button>
        <el-button type="primary" @click="isAdd = true">新增</el-button>
        <el-button type="danger">删除</el-button>
      </div>
    </div>
    <div class="list_con" v-loading="loading">
      <div class="flex list_data">
        <div class="table-collapse">
          <el-input
            v-model="filterText"
            style="width: 240px"
            class="mb30"
            size="large"
            placeholder="Filter keyword"
          />
          <el-tree
            ref="treeRef"
            style="max-width: 600px"
            class="filter-tree"
            :data="data"
            :props="defaultProps"
            default-expand-all
            :filter-node-method="filterNode"
          />
        </div>
        <el-table
          :data="tableData"
          v-resize="{ bottomOffset: 120 }"
          ref="tableRef"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          header-cell-class-name="table_head_s"
          cell-class-name="table_cell_s"
        >
          <el-table-column type="selection" width="100" />
          <el-table-column prop="date" label="编号"> </el-table-column>
          <el-table-column prop="name" label="职务名称"> </el-table-column>
          <el-table-column prop="address" label="备注"> </el-table-column>
          <el-table-column prop="address" label="修改人"> </el-table-column>
          <el-table-column prop="address" label="修改时间"> </el-table-column>
          <el-table-column prop="address" label="操作" width="150">
            <template #default="scope">
              <el-button type="primary" link>编辑</el-button>
              <el-button type="primary" link>删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="mt20 flex_c">
        <el-pagination
          v-model:current-page="pagination.current"
          v-model:page-size="pagination.size"
          :page-sizes="pagination.sizeOption"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
          :pager-count="5"
          @size-change="pagination.onSizeChange"
          @current-change="pagination.onCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
// import dialogAdd from "./components/add.vue";
import { login } from "@/api/common";
import { useTable } from "@/hooks/pageList";

interface User {
  date: string;
  name: string;
  address: string;
}

const router = useRouter();
const isAdd = ref(false);
const params = ref("");
const [tableData, refresh, loading, pagination] = useTable(
  login,
  {},
  {
    immediate: true,
  }
);
const data: Tree[] = [
  {
    id: 1,
    label: "Level one 1",
    children: [
      {
        id: 4,
        label: "Level two 1-1",
        children: [
          {
            id: 9,
            label: "Level three 1-1-1",
          },
          {
            id: 10,
            label: "Level three 1-1-2",
          },
        ],
      },
    ],
  },
  {
    id: 2,
    label: "Level one 2",
    children: [
      {
        id: 5,
        label: "Level two 2-1",
      },
      {
        id: 6,
        label: "Level two 2-2",
      },
    ],
  },
  {
    id: 3,
    label: "Level one 3",
    children: [
      {
        id: 7,
        label: "Level two 3-1",
      },
      {
        id: 8,
        label: "Level two 3-2",
      },
    ],
  },
];
interface Tree {
  [key: string]: any;
}

const filterText = ref("");
const treeRef = ref(null);

const defaultProps = {
  children: "children",
  label: "label",
};

watch(filterText, (val) => {
  treeRef.value!.filter(val);
});

const filterNode = (value: string, data: Tree) => {
  if (!value) return true;
  return data.label.includes(value);
};
const activeNames = ref(["1"]);
const handleChange = (val: string[]) => {
  console.log(val);
};
const multipleTableRef = ref();
const multipleSelection = ref<User[]>([]);
const toggleSelection = (rows?: User[]) => {
  if (rows) {
    rows.forEach((row) => {
      multipleTableRef.value!.toggleRowSelection(row, undefined);
    });
  } else {
    multipleTableRef.value!.clearSelection();
  }
};
const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val;
};
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
};
</script>
